<template>
<div class="container">
    <van-nav-bar title="键盘" left-arrow fixed :border="false"
      @click-left='$router.push("/")'/>
    <van-button type="primary"
    size="large"
    @click.stop="Open1()">打开数字键盘</van-button>

    <van-tag size="large">数字键盘：{{number1}}</van-tag>
    <van-divider />

     <van-button type="default"
    size="large"
    @click.stop="Open2()">打开密码框</van-button>

    

    <van-tag size="large">密码：{{number2}}</van-tag>

    <van-divider />
    <!-- 倒计时组件 -->
    <van-tag size="large">倒计时组件：</van-tag>
    <CountDown/>

    <!-- 数字键盘 -->
    <transition name="slide">
        <NumberInput
        v-if="show1"
        @number="getNumber"
        @close="Cancel1"
        @confirm="Confirm1"
        />
    </transition>
    <!-- 密码框 -->
    <transition name="slide">
        <PasswordInput 
        v-if="show2"
        @cancel="Cancel2"
        @confirm="Confirm2"
        />
    </transition>

</div>
</template>
<script>
export default {
    name:"Passwordinput",
    data(){
        return{
            number1:'',
            show1:false,
            number2:'',
            show2:false,
        }
    },
    methods:{
        getNumber(e){
            this.number1 = e;
        },
        Open1(){
            this.show1 = true;
        },
        Cancel1(){
            this.show1 = false;
        },
        Confirm1(num){
            this.number1 = num; 
            this.show1 = false;
        },
        Open2(){
            this.show2 = true;
        },
        Cancel2(){
            this.show2 = false;
        },
        Confirm2(num){
            this.number2 = num; 
            this.show2 = false;
        }
    },
    directives:{
        'focus':{
            inserted: function (el) {
                el.focus()
            }
        }
    },
    computed:{
        num_list(){
            let arr;
            if(this.num){
                arr = this.num.split("");
                if(arr.length<6){
                    for(var i=arr.length;i<=(6-arr.length);i++){
                        arr.push('');
                    }
                }
            }else{
                arr = ["","","","","",""];
            }
            return arr;
        }
    }
}
</script>
<style lang="less" scoped>
.slide-enter-active,
.slide-leave-active{
    position: fixed;
    top:0;
    transition: all .5s;
}
.slide-enter,.slide-leave-to{
    transform: translateY(100%);
}
</style>